<template>
  <div class="calibration-view" v-if="isComponentLoaded">
    <component :is="CalibrationForm" ref="moduleRef" />
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "CalibrationView",
  components: {}
});

import { provide, ref, onMounted, type DefineComponent } from 'vue';
import type { ModuleInterface, SendCmd } from "@/common/index";
import { SEND_CALIBRATION_CMD_KEY, GET_CALIBRATION_DATA_KEY } from "@/common/index";
import { LoadModules } from "@/utils/loadModules";

import { handleCommand } from '@/utils/commandHandler';
import type { AxiosRequestConfig } from 'axios';
import type { Response } from '@/mctp-api';

// 2. 响应式存储组件（核心）
const CalibrationForm = ref<DefineComponent | null>(null);
let createCalibrationModule: ((sendCmd: SendCmd<any, any>, initialData: any) => ModuleInterface<any>) | null = null;
const isComponentLoaded = ref(false); // 标记组件是否加载完成，控制模板渲染
interface CalibrationFormInstance {
  dataEvent: (value: any) => void; // 匹配组件的 dataEvent 方法定义
}
const moduleRef = ref<(DefineComponent & CalibrationFormInstance) | null>(null);
const index = ref(0);

// const SEND_CALIBRATION_CMD_KEY = "send-calibration-cmd"; // 协商好的字符串Key
// const GET_CALIBRATION_DATA_KEY = "get-calibration-data"; // 配套的"获取数据"Key

const sendCalibrationCmd = ref<(cmd: string, cmdParams?: any) => any>();
const getCalibrationData = ref<any>();

provide(SEND_CALIBRATION_CMD_KEY, sendCalibrationCmd);
provide(GET_CALIBRATION_DATA_KEY, getCalibrationData);

// 校准模块加载函数（支持插件命名机制）
const importModule = async () => {
  const moduleName: string = '校准';
  try {
    const loadModulesInstance = new LoadModules();
    const module = await loadModulesInstance.loadModule(moduleName);

    // 按照taskView的成功方式调整获取顺序：优先直接获取createCalibrationModule，然后是default中的createCalibrationModule，最后是default
    createCalibrationModule = module.createCalibrationModule || module.default?.createCalibrationModule || module.default;
    CalibrationForm.value = module.CalibrationForm || module.default?.CalibrationForm;

    console.log(`校准模块[${moduleName}]加载成功`, {
      createCalibrationModule: createCalibrationModule,
      CalibrationForm: CalibrationForm.value
    });

  } catch (e) {
    console.error(`校准模块[${moduleName}]加载失败`, e);
  }
};

const loadModule = async () => {
  if (!createCalibrationModule) {
    console.error("createCalibrationModule 未加载完成");
    return;
  }
  // 1. EventData 初始值：空对象（业务数据由后端返回，初始无需填充）
  const initialCalibData = {};

  // 2. 平台命令处理：完全转发插件传递的所有参数，对齐 createPost 逻辑
  const handleModuleCmd: SendCmd<{
    moduleId: string;
    fixedParams?: any;
    data?: Record<string, any>;
    params?: any;
    config?: AxiosRequestConfig;
  }, Response<any>> = async (moduleName, cmd, cmdParams) => {
    if (moduleName !== "CalibrationForm") return { code: 400, msg: "模块不匹配", data: null };

    console.log("来自插件的请求--CalibrationForm");

    console.log("平台接收校准指令：", cmd, cmdParams);


    const { commandName, command } = cmdParams?.fixedParams || {};
    const unifiedCommand = commandName || command || "";

    let url = `/api/Calibration/SendCommand`;
    if (unifiedCommand === "GetCalibrationModuleCommandDescription") {
      url = `/api/Calibration/GetCalibrationModuleCommandDescription`;
    }


    // 直接调用平台的 handlePluginCommand，传递所有参数（复刻 createPost 逻辑）
    return handleCommand(
      url, // url
      cmdParams?.fixedParams, // 固定参数（对齐 createPost 的 fixedParams）
      cmdParams?.data, // 业务数据（对齐 createPost 的 data）
      cmdParams?.params, // URL 参数（对齐 createPost 的 params）
      cmdParams?.config // Axios 配置（对齐 createPost 的 config）
    );
  };

  // 3. 创建插件实例：完全对齐原有调用方式
  const calibrationModule: ModuleInterface<typeof initialCalibData> = createCalibrationModule(
    handleModuleCmd,
    initialCalibData
  );

  // 关键：更新响应式引用，而不是重新提供
  sendCalibrationCmd.value = (cmd: string, cmdParams?: any) => {
    return calibrationModule.sendCommand(cmd, cmdParams);
  };
  getCalibrationData.value = () => calibrationModule.eventData;

  // 5. 手动初始化插件
  await calibrationModule.startup();

  isComponentLoaded.value = true;

}

onMounted(async () => {
  await importModule();
  console.log("createCalibrationModule", createCalibrationModule, "CalibrationForm", CalibrationForm);
  await loadModule();
  (moduleRef.value as any)?.dataEvent(index.value);
})

</script>

<style lang="scss" scoped>
.calibration-view {
  height: 100%;
  overflow: auto;
  background-color: rgb(255, 255, 255);

  /* 美化原生滚动条（仅影响当前容器） */
  &::-webkit-scrollbar {
    width: 6px;
    /* 纵向滚动条宽度 */
    height: 6px;
    /* 横向滚动条高度 */
  }

  /* 滚动条轨道 */
  &::-webkit-scrollbar-track {
    background: transparent;
    /* 轨道透明，避免干扰子组件 */
  }

  /* 滚动条滑块 */
  &::-webkit-scrollbar-thumb {
    background: rgba(144, 147, 153, 0.3);
    /* 浅灰色半透明 */
    border-radius: 3px;
    /* 圆角 */
    transition: background 0.2s;
  }

  /* 滑块hover效果 */
  &::-webkit-scrollbar-thumb:hover {
    background: rgba(144, 147, 153, 0.6);
  }

  /* 隐藏横向滚动条（如果不需要） */
  &::-webkit-scrollbar-horizontal {
    display: none;
  }
}
</style>
